<template lang="pug">
  .hro-admin-home
    Row(:gutter="20")
      Col.mb-15(:md="{ span: 24 }" :lg="{ span: 24 }" :xl="{span: 16}" :xxl="{span: 18}")
        //- Card(shadow title="数据总览" style="height: 580px;")
        .hro-card.mb-12
          Spin(size="large" fix v-if="dataScreenSpin")
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-shuju.png")
              span 数据总览
            .title-right
              router-link(v-if="hasDataScreening" :to="{ name: 'data-screening'}") 数据看板
          Row.card-container
            Col.data-item(:xl="{span: 12}" :xxl="{span: 12}")
              .item-title
                .text
                  | 客户数量：
                  span.blue(@click="gotoStatus('customerInformation', '', '1')") {{dataScreen?dataScreen.customerTotal:0}}
                  | （家）
                  span.tag.ml-5.font-12 正常合作
              .item-content.warp
                template(v-if="hasCustomer")
                  .li(@click="gotoStatus('customerInformation', '1', '1')")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/kehu-1.png")
                      span 人事代理
                    .li-number
                      count-to(:end="dataScreen?dataScreen.agentTotal:0" count-class="count-style")
                  .li(@click="gotoStatus('customerInformation', '2', '1')")
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/kehu-2.png")
                      span 劳务派遣
                    .li-number
                      count-to(:end="dataScreen?dataScreen.laborDispatchTotal:0" count-class="count-style")
                  .li(@click="gotoStatus('customerInformation', '3', '1')")
                    .li-img.style-3
                      img.mb-10(src="@/assets/images/home/kehu-3.png")
                      span 劳务外包
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outsourcingTotal:0" count-class="count-style")
                template(v-if="!hasCustomer")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/kehu-1.png")
                      span 人事代理
                    .li-number
                      count-to(:end="dataScreen?dataScreen.agentTotal:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/kehu-2.png")
                      span 劳务派遣
                    .li-number
                      count-to(:end="dataScreen?dataScreen.laborDispatchTotal:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-3
                      img.mb-10(src="@/assets/images/home/kehu-3.png")
                      span 劳务外包
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outsourcingTotal:0" count-class="count-style")
            Col.data-item(:xl="{span: 12}" :xxl="{span: 12}")
              .item-title
                .text
                  | 员工数量：
                  span.blue(@click="gotoRouter('roster')") {{dataScreen?dataScreen.empTotal:'0'}}
                  | （人）
              .item-content.warp
                template(v-if="hasRoster")
                  .li(@click="gotoRouter('roster', 1)")
                    .li-img.style-4
                      img.mb-10(src="@/assets/images/home/yuangong-1.png")
                      span 在职
                    .li-number
                      count-to(:end="dataScreen?dataScreen.inEmployee:0" count-class="count-style")
                  .li(@click="gotoRouter('roster', 0)")
                    .li-img.style-5
                      img.mb-10(src="@/assets/images/home/yuangong-2.png")
                      span 离职
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outEmployee:0" count-class="count-style")
                  .li(@click="gotoRouter('roster', -1)")
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/yuangong-3.png")
                      span 离职未报停
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outNoStopEmployee:0" count-class="count-style")
                template(v-if="!hasRoster")
                  .li.no-hover
                    .li-img.style-4
                      img.mb-10(src="@/assets/images/home/yuangong-1.png")
                      span 在职
                    .li-number
                      count-to(:end="dataScreen?dataScreen.inEmployee:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-5
                      img.mb-10(src="@/assets/images/home/yuangong-2.png")
                      span 离职
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outEmployee:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/yuangong-3.png")
                      span 离职未报停
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outNoStopEmployee:0" count-class="count-style")
            Divider
            Col.data-item(:xl="{span: 12}" :xxl="{span: 12}")
              .item-title
                .text
                  | 异动数量（条）
                  span.tag.ml-5.font-12 当月
              .item-content.warp
                template(v-if="hasSS")
                  .li(@click="gotoPage(dataScreen.socialSecurity.code,{hasTime:true, hasStatus: false})")
                    .li-img.style-5
                      img.mb-10(src="@/assets/images/home/yd-shebao.png")
                      span 社保异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.socialSecurity.count:0" count-class="count-style")
                template(v-if="!hasSS")
                  .li.no-hover
                    .li-img.style-5
                      img.mb-10(src="@/assets/images/home/yd-shebao.png")
                      span 社保异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.socialSecurity.count:0" count-class="count-style")
                template(v-if="hasAf")
                  .li(@click="gotoPage(dataScreen.providentFund.code,{hasTime:true, hasStatus: false})")
                    .li-img.style-6
                      img.mb-10(src="@/assets/images/home/yd-gjj.png")
                      span 公积金异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.providentFund.count:0" count-class="count-style")
                template(v-if="!hasAf")
                  .li.no-hover
                    .li-img.style-6
                      img.mb-10(src="@/assets/images/home/yd-gjj.png")
                      span 公积金异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.providentFund.count:0" count-class="count-style")
                template(v-if="hasCi")
                  .li(@click="gotoPage(dataScreen.commercialInsurance.code,{hasTime:true, hasStatus: false})")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/yd-shangbao.png")
                      span 商保异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.commercialInsurance.count:0" count-class="count-style")
                template(v-if="!hasCi")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/yd-shangbao.png")
                      span 商保异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.commercialInsurance.count:0" count-class="count-style")
            Col.data-item(:xl="{span: 12}" :xxl="{span: 12}")
              .item-title
                .text
                  | 到期提醒（个）
              .item-content.warp
                template(v-if="hasCustomer")
                  .li(@click="gotoDue('customerInformation', true)")
                    .li-img.style-3
                      img.mb-10(src="@/assets/images/home/daoqi-1.png")
                      span 客户到期<br>< 60天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.expireInMonthCustomerTotal:0" count-class="count-style")
                template(v-if="!hasCustomer")
                  .li.no-hover
                    .li-img.style-3
                      img.mb-10(src="@/assets/images/home/daoqi-1.png")
                      span 客户到期<br>< 60天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.expireInMonthCustomerTotal:0" count-class="count-style")
                template(v-if="hasRoster")
                  .li(@click="gotoDue('roster', true)")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/daoqi-2.png")
                      span 员工到期<br>< 60天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.dueEmployee:0" count-class="count-style")
                  .li(@click="gotoRetire('roster', true)")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/daoqi-3.png")
                      span 员工退休<br>< 180天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.retireEmployee:0" count-class="count-style")
                template(v-if="!hasRoster")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/daoqi-2.png")
                      span 员工到期<br>< 60天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.dueEmployee:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/daoqi-3.png")
                      span 员工退休<br>< 180天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.retireEmployee:0" count-class="count-style")
                //- .li(@click="gotoRetire('roster', true)")
                //-   .li-img.style-1
                //-     img.mb-10(src="@/assets/images/home/daoqi-3.png")
                //-     span 两个月内<br>退休员工
                //-   .li-number
                //-     count-to(:end="dataScreen?dataScreen.retireEmployee:0" count-class="count-style")
            Divider
            Col.data-item(span="24")
              .item-title
                .text
                  | 费用数据（元）
                  span.tag.ml-5.font-12 当月
              .item-content.warp
                .li.no-hover
                  .li-img.style-5
                    img.mb-10(src="@/assets/images/home/fy-shebao.png")
                    span 社保费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.socialInsuranceAmt:0" count-class="count-style" :decimals="2")
                .li.no-hover
                  .li-img.style-6
                    img.mb-10(src="@/assets/images/home/fy-gjj.png")
                    span 公积金费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.cpfAmt:0" count-class="count-style" :decimals="2")
                .li.no-hover
                  .li-img.style-1
                    img.mb-10(src="@/assets/images/home/fy-shangbao.png")
                    span 商保费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.commercialInsuranceAmt:0" count-class="count-style" :decimals="2")
                .li.no-hover
                  .li-img.style-7
                    img.mb-10(src="@/assets/images/home/fy-xinzi.png")
                    span 薪资费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.salaryAmt:0" count-class="count-style" :decimals="2")
                .li.no-hover
                  .li-img.style-2
                    img.mb-10(src="@/assets/images/home/fy-fuwufei.png")
                    span 服务费费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.serviceFeeAmt:0" count-class="count-style" :decimals="2")
            Divider
            Col.data-item(span="24" style='padding-bottom: 240px;')
              .item-title
                .text
                  | 账单核对情况
                  span.tag.ml-5.font-12 当月
              .item-content.warp
                template(v-if="hasCustomerBill")
                  .li(@click="gotoBill('CustomerBill', '1')")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/hedui-yes.png")
                      span 已核对
                    .li-number
                      count-to(:end="dataScreenBill?dataScreenBill.verifiedCount:0" count-class="count-style")
                  .li(@click="gotoBill('CustomerBill', '0')")
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/hedui-no.png")
                      span 未核对
                    .li-number
                      count-to(:end="dataScreenBill?dataScreenBill.noVerifiedCount:0" count-class="count-style")
                template(v-if="!hasCustomerBill")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/hedui-yes.png")
                      span 已核对
                    .li-number
                      count-to(:end="dataScreenBill?dataScreenBill.verifiedCount:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/hedui-no.png")
                      span 未核对
                    .li-number
                      count-to(:end="dataScreenBill?dataScreenBill.noVerifiedCount:0" count-class="count-style")
        //- .hro-card.fast-link.mb-12
        //-   Spin(size="large" fix v-if="dataScreenSpin")
        //-   .card-title
        //-     .title-left
        //-       img.mr-8(src="@/assets/images/home/card-kuaijie.png")
        //-       span 快捷键
        //-     .title-right
        //-       .zidingyi(@click="getCustomFastMenuList")
        //-         Icon.mr-5(type="ios-add-circle-outline")
        //-         | 添加链接
        //-   .fast-menu
        //-     .item(v-for="(item,index) in fastMenuList" :key="index" @click="gotoPage(item.code)")
        //-       span {{item.title}} 
        //-       i.iconfont.icon-link.font-18
        //- .hro-card.tubiao
        //-   Spin(size="large" fix v-if="financeSpin")
        //-   .card-title.mb-12
        //-     .title-left
        //-       img.mr-8(src="@/assets/images/home/card-tubiao.png")
        //-       span 图表统计
        //-   Row(:gutter="20")
        //-     Col.mb-15(:md="{ span: 24 }" :lg="{ span: 12 }" :xxl="{span: 12}")
        //-       Card()
        //-         .tatol
        //-           .item
        //-             .text.style-1 合作客户：
        //-               span.number {{customerAllIn}}
        //-           .item
        //-             .text.style-1 本月新增：
        //-               span.number {{customerCurrentAdd}}
        //-           .item
        //-             .text.style-1 本月终止合作：
        //-               span.number {{customerCurrentLeave}}
        //-         ChartLine(style="height: 300px;" :seriesColor="'#0dc2ff'" :value="customerLineData" text="合作客户数量统计（单位：家）")
        //-     Col.mb-15(:md="{ span: 24 }" :lg="{ span: 12 }" :xxl="{span: 12}")
        //-       Card()
        //-         .tatol
        //-           .item
        //-             .text.style-3 当月应收账单金额：
        //-               span.number {{benyueBill}}
        //-         ChartLine(style="height: 300px;" :seriesColor="'#ffc858'" :value="billLineData" text="应收账单统计（单位：万元）")
        //-     Col.mb-15(:md="{ span: 24 }" :lg="{ span: 12 }" :xxl="{span: 12}")
        //-       Card()
        //-         .tatol
        //-           .item
        //-             .text.style-2 在职员工：
        //-               span.number {{employeeAllIn}}
        //-           .item
        //-             .text.style-2 本月新增：
        //-               span.number {{employeeCurrentAdd}}
        //-           .item
        //-             .text.style-2 本月离职：
        //-               span.number {{employeeCurrentLeave}}
        //-         ChartLine(style="height: 300px;" :seriesColor="'#ccb2ff'" :value="employeeLineData" text="在职员工统计数据（单位：人）")
        //-     Col.mb-15(:md="{ span: 24 }" :lg="{ span: 12 }" :xxl="{span: 12}")
        //-       Card()
        //-         ChartBar(style="height: 300px;" :value="barData" text="异动数据统计（单位：条）")
      Col.mb-15(:md="{ span: 24 }" :lg="{ span: 24 }" :xl="{span: 8}" :xxl="{span: 6}")
        .hro-card.log
          Spin(size="large" fix v-if="loggerSpin")
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-log.png")
              span 操作日志
            .title-right.more-span.text-gray-9(@click="gotoRouter('loggerList')")
              span
              | 查看更多
              Icon(type="ios-arrow-forward")
          .no-data(v-if="loggerList.length < 1") 暂无操作日志
          .oplog-content
            Timeline
              TimelineItem(v-for="(item,index) in loggerList" :key="index")
                span.font-12 {{item.operateOn.slice(0, 19).replace(/T/g,' ')}}
                div
                  span.mr-8 {{item.operateByName}}
                  span.mr-8 {{item.title}}
                .font-12.text-gray-9 IP：{{item.ipAddress}}
        .hro-card.mt-12
          Spin(size="large" fix v-if="processMsgSpin")
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-shenpi.png")
              span 流程审批
          ul.flow-ul
            li(v-for="(item,index) in processMsgList" :key="index" @click="gotoPage(item.code,{status:4, hasStatus: true})") {{item.content}}
        //- Card.mt-10(shadow title="财务信息" style="height: 200px")
        .hro-card.mt-12
          Spin(size="large" fix v-if="financeSpin")
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-caiwu.png")
              span 财务信息
          ul.flow-ul
            li 本月应付总额：
              span.blue {{financeData?financeData.currentShouldPay:'0'}}
              | 元
            li 客户挂账总额：
              span.blue {{financeData?financeData.currentOnAccount:'0'}}
              | 元
            li 本月已开票总额：
              span.blue {{financeData?financeData.currentInvoiceTotal:'0'}}
              | 元
            li 本月未开票总额：
              span.blue {{financeData?financeData.currentNoInvoiceTotal:'0'}}
              | 元
    Modal(v-model="customize" title="自定义" width="800" @on-ok="saveFastMenuList")
      Spin(size="large" fix v-if="customFastMenuListSpin")
      CheckboxGroup(v-model="fastMenuListId" @on-change="fastMenuListChange")
        Checkbox(v-for="(item,index) in customFastMenuList" :label="item.id" style="padding: 10px" :key="index") {{item.title}}
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
import homeApi from '@/api/home.api.js'
import { ChartLine, ChartBar } from '_c/charts'
import Mixin from './homeMixin.js'
import CountTo from '_c/count-to'

export default {
  components: {
    CountTo,
    ChartBar,
    ChartLine
  },
  data () {
    return {
      dom: null,
      barData: [],
      customerAllIn: null, // 客户统计
      customerCurrentAdd: null, // 客户当月新增
      customerCurrentLeave: null, // 客户当月减少
      customerLineData: [], // 客户折线统计数据

      billLineData: [], // 账单折线图统计数据

      employeeAllIn: null, // 在职员工统计
      employeeCurrentAdd: null, // 员工当月新增
      employeeCurrentLeave: null, // 员工当月减少
      employeeLineData: [] // 员工数据统计折线图数据
    }
  },
  mixins: [Mixin],
  created () {
    this.getProcessMsgList()
    this.getFinanceData()
    this.GetChangeStat()
    this.GetCustomerTotal()
    this.GetBillsTotal()
    this.GetEmployeeTotal()
  },
  computed: {
    benyueBill () {
      let num = this.billLineData[this.billLineData.length-1]
      if (num) {
        return num.total
      } else {
        return 0
      }
    },
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    hasDataScreening () {
      return this.actionArr.indexOf('ShuJuKanBan') > -1
    }
  },
  methods: {
    // 获取客户信息
    GetCustomerTotal () {
      homeApi.GetCustomerTotal({
        CompanyID: ''
      }).then(res => {
        this.customerAllIn = res.data.data.allIn
        this.customerCurrentAdd = res.data.data.currentNew
        this.customerCurrentLeave = res.data.data.currentLeave
        this.customerLineData = res.data.data.lists
      })
    },
    // 工作台获取账单信息
    GetBillsTotal () {
      homeApi.GetBillsTotal({
        CompanyID: ''
      }).then(res => {
        res.data.data.map(item => {
          this.billLineData.push({
            periodMonth: item.periodMonth,
            periodYear: item.periodYear,
            total: (item.total/10000).toFixed(2)
          })
        })
      })
    },
    // 工作台获取员工信息
    GetEmployeeTotal () {
      homeApi.GetEmployeeTotal({
        CompanyID: ''
      }).then(res => {
        this.employeeAllIn = res.data.data.allBeHiring
        this.employeeCurrentAdd = res.data.data.currentNew
        this.employeeCurrentLeave = res.data.data.currentLeave
        this.employeeLineData = res.data.data.lists
      })
    },
    // 工作台获取异动信息
    GetChangeStat () {
      homeApi.GetChangeStat({
        year: 0
      }).then(res => {
        this.barData = res.data.data
        this.barData.forEach(item => {
          item.month = item.month.slice(0, 7)
        })
        console.log(this.barData)
      })
    }
  }
}
</script>


<style lang="less" scoped>
  .oplog-content{
    height: 471px;
    overflow: auto;
  }
  .fast-menu{
    height: 177px;
    overflow: auto;
  }
  .flow-ul{
    height: 300px;
    overflow: auto;
  }
</style>
